<template>
	<div class="category">
		<!-- 选项卡区域 -->
		<!-- <img :src="imgurl" /> -->
		<div class="tab1">
			<h3>好评最高5本书</h3>
			<ul>
				<li v-for="item in imgurl1" :key="item.id">
					<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
				</li>
			</ul>
		</div>
		<div class="tab2">
			<h3>销量最高5本书</h3>
			<ul>
				<li v-for="item in imgurl2" :key="item.id">
					<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
				</li>
			</ul>
		</div>
		<div class="tab3">
			<h3>意向最高5本书</h3>
			<ul>
				<li v-for="item in imgurl3" :key="item.id">
					<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`">
					<p>{{item.name}}</p>
					<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Category',
		data(){
			return {
				imgurl1 : [],
				imgurl2 : [],
				imgurl3 : []
			}
		},
		methods:{
			buy( val ){
				let token = localStorage.getItem( 'token' );
				if( token == '' ){
					this.$message.warning({
						message : '请登录账号,未登录,无法购买',
						offset : 80
					});
				}else{
					instance.post( 'http://127.0.0.1:8093/api/public/addCart/'+val.id ).then( (res)=>{
						// console.log(res);
						if( res.data.code == 200 ){
							this.$message.success({
								message : '添加购物车成功',
								offset : 80
							});
						}
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
				
			}
		},
		mounted(){
			this.axios.get( '/api/public/book/findRate5' ).then( (res)=>{
				// console.log( this.$Imgurl );
				// console.log(res.data.data);
				this.imgurl1 = res.data.data;
				// this.imgurl = this.$Imgurl+'/api/public/showImg/'+res.data.data[0].picture
				// console.log(this.imgurl1);
			} ).catch( (error)=>{
				console.log(error);
			} );
			
			this.axios.get( '/api/public/book/findSale5' ).then( (res)=>{
				// console.log( this.$Imgurl );
				// console.log(res.data.data);
				this.imgurl2 = res.data.data;
				// this.imgurl = this.$Imgurl+'/api/public/showImg/'+res.data.data[0].picture
				// console.log(this.imgurl2);
			} ).catch( (error)=>{
				console.log(error);
			} );
			
			this.axios.get( '/api/public/book/findFav5' ).then( (res)=>{
				// console.log( this.$Imgurl );
				// console.log(res.data.data);
				this.imgurl3 = res.data.data;
				// this.imgurl = this.$Imgurl+'/api/public/showImg/'+res.data.data[0].picture
				// console.log(this.imgurl3);
			} ).catch( (error)=>{
				console.log(error);
			} );
			
		}
	}
</script>

<style scoped>
	.category .tab1,.category .tab2,.category .tab3{
		/* margin-top: 20px; */
		width: 98%;
		float: left;
	}
	.category .tab1{
		position: absolute;
		top: 580px;
	}
	.category .tab2{
		position: absolute;
		top: 1000px;
	}
	.category .tab3{
		position: absolute;
		top: 1420px;
	}
	.category .tab1 h3,.category .tab2 h3,.category .tab3 h3{
		font-size: 20px;
		color: red;
		height: 50px;
		margin-left: 25px;
		border-bottom: 2px solid gold;
	}
	.category .tab1 ul,.category .tab2 ul,.category .tab3 ul{
		list-style: none;
		width: 100%;
	}
	.category .tab1 img,.category .tab2 img,.category .tab3 img{
		width: 200px;
		height: 200px;
	}
	.category .tab1 ul li,.category .tab2 ul li,.category .tab3 ul li{
		margin-top: 20px;
		width: 20%;
		text-align: center;
		float: left;
	}
	.category .tab1 p,.category .tab2 p,.category .tab3 p{
		margin-top: 10px;
	}
	.category .tab1 button,.category .tab2 button,.category .tab3 button{
		margin-left: 10px;
	}
</style>
